بوت استرپ یکی از اولین انتخاب های طراحان وب برای طراحی قالب ریسپانسیو می باشد. اما باید ابتدا با مزایا و معایب بوت استرپ آشنا شوید و سپس تصمیم نهایی را بگیرید.
اخیرا بنا به سفارش یکی از مشتریان خود، یک قالب ریسپانسیو طراحی کردم و به دلیل اینکه هیچگاه از کدهای آماده استفاده نمی کنم، کار بدون bootstrap انجام شد و پس از اتمام کار نتیجه جالبی بدست آمد.
کل فایل CSS قالب 450 خط بود و از این 450 خط 190 خط مربوط به مدیاکوئری ها می شد. به عبارت دیگر با اضافه کردن 190 خط کد، قالب را به یک قالب ریسپانسیو تبدیل کردم. مسئله دیگری که باعث جالب تر شدن نتیجه کار شد این بود که نیازی به اعمال تغییرات گسترده در کد HTML وجود نداشت و فقط چند جابجایی ساده بین عناصر صفحه اعمال شد.
حال اگر می خواستم این کار را با bootstrap انجام دهم، ضعفهایی در قالب ایجاد می شد که در ادامه با آنها آشنا می شویم:
برای اینکه bootstrap برای شما یک قالب ریسپانسیو ایجاد کند باید فایل مربوط به سیستم درجه بندی بوت استرپ را در سورس صفحه قرار دهید. افزودن این فایل تعداد درخواستهای مرورگر از سرور و زمان لود صفحه را افزایش می دهد.
برای اینکه Grid system به درستی کار کند باید در عناصر مختلف صفحه کلاسهای زیادی قرار دهید.
به عنوان مثال باید به ساید بار وب سایت این کلاسها را اضافه کنید:
class="col-xs-12 col-sm-6 col-md-8"
برای سایر عناصر نیز باید به همین صورت عمل کنید اما این کار حجم کد HTML نسبت به محتوای صفحه را افزایش می دهد. حال اگر بخواهید بین ساید بار و ستون کناری فاصله ایجاد کنید باید کد فوق به این صورت تغییر کند:
class="col-xs-12 col-sm-6 col-sm-offset-2 col-md-8 col-md-offset-1"
اما درصورتیکه در فایل CSS از مدیا کوئری ها استفاده کنید به هیچکدام از این کدها نیاز نخواهید داشت.
یک مشکل دیگری که وجود دارد این است که بوت استرپ اساسا برای زبانهایی که راست چین هستند طراحی نشده است و به همین دلیل باید یک فایل CSS دیگر به سورس HTML اضافه کنید که بوت استرپ را راست چین کند. با افزودن این فایل باز هم تعداد درخواستهای مرورگر از سرور و زمان لود صفحه افزایش مییابد.
بوت استرپ قالب را بصورت پیش فرض به 12 ستون تبدیل می کند که عرض ستونها به این صورت می باشد:
Extra small devices Phones (<768px): Auto
Small devices Tablets (≥768px): ~62px
Medium devices Desktops (≥992px): ~81px
Large devices Desktops (≥1200px): ~97px
اگر بخواهید درون یکی از ستونهای سایت، ستون جدیدی ایجاد کنید باز هم مجبور هستید که ستون جدید را به 12 قسمت تقسیم کنید و عناصر داخلی را بر این اساس درجه بندی کنید.
اگر سایتهایی که با بوت استرپ ایجاد شده اند را به دقت بررسی کنید متوجه یک فضای خالی بین عناصر صفحه می شوید که دلیلش مشخص نبودن عرض عناصر صفحه و دشوار بودن تعیین پهنا و فاصله عناصر برای طراح می باشد.
